<template>
    <div class="toolbar">
        <el-input :trigger-on-focus="false" clearable placeholder="搜索昵称或用户名" v-model="pageModel.searchText" @keyup.enter="search"/>
        <el-button class="search" type="primary" @click="search" icon="Search">搜索</el-button>
        <el-button type="primary" @click="dialogadd" icon="Plus">添加用户</el-button>
    </div>
    <div>
        <el-table :data="data" border v-loading="loading">
            <el-table-column label="Id" prop="Id" width="100px" />
            <el-table-column label="姓名（昵称）" prop="NickName" />
            <el-table-column label="用户名" prop="UserName" />
            <el-table-column label="操作" align="center" width="300px" fixed="right">
                <template #default="scope" >
                    <el-button type="warning" @click="dialogedit(scope.row)">编辑</el-button>
                    <el-button type="primary" @click="diapwd(scope.row)">修改密码</el-button>
                    <el-popconfirm title="你确定要删除吗？" confirm-button-text="确定" cancel-button-text="取消" icon="opportunity"
                        icon-color="#fff100" width="160px" @confirm="delrow(scope.row.Id)">
                        <template #reference>
                            <el-button type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="bottom">
        <el-pagination background :total="total" v-model:page-size="pageModel.pageSize"
            v-model:current-page="pageModel.pageIndex" :page-sizes="[10, 25, 50, 100]"
            layout="total, prev, pager, next,sizes, jumper" @current-change="handleCurrentChange"
            @size-change="handleSizeChange"></el-pagination>
    </div>
    <el-dialog v-model="dialogVisible" title="添加用户" width="50%" draggable>
        <el-form ref="addForm" label-width="120px" label-position="top" :model="addModel" :rules="rules">
            <el-form-item label="姓名（昵称）">
                <el-input placeholder="请填写姓名" v-model="addModel.NickName"></el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="UserName">
                <el-input placeholder="请填写用户名" v-model="addModel.UserName"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="UserPwd">
                <el-input placeholder="请填写密码" type="password" show-password v-model="addModel.UserPwd"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="info" @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addUser">添加</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <el-dialog v-model="dialogVisibledit" title="编辑用户" width="50%" draggable>
        <el-form ref="editForm" label-width="120px" label-position="top" :model="editModel" :rules="editrules">
            <el-form-item label="姓名（昵称）">
                <el-input placeholder="请填写姓名" v-model="editModel.NickName"></el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="UserName">
                <el-input placeholder="请填写用户名" v-model="editModel.UserName"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="info" @click="dialogVisibledit = false">取消</el-button>
                <el-button type="warning" @click="editUser">更新</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <el-dialog v-model="dialogVisiblepwd" title="修改密码" width="20%" draggable>
        <el-form ref="pwdForm" label-width="120px" label-position="top" :model="pwdModel" :rules="pwdrules">
            <el-form-item label="Id">
                <el-input disabled v-model="pwdModel.Id"></el-input>
            </el-form-item>
            <el-form-item label="修改密码" prop="UserPwd">
                <el-input placeholder="请填写要修改的密码" v-model="pwdModel.UserPwd"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="info" @click="dialogVisiblepwd = false">取消</el-button>
                <el-button type="primary" @click="pwdredit">修改</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
<script setup>
import { reactive, ref } from 'vue'
import connect from '../untils/require'
import { ElNotification, ElLoading } from 'element-plus'
// 弹窗
let dialogVisible = ref(false)
let dialogVisibledit = ref(false)
let dialogVisiblepwd = ref(false)
// 添加用户视图
let addForm = ref(null)
let editForm = ref(null)
let pwdForm = ref(null)
let data = reactive([])
// 分页模型
let pageModel = reactive({
    pageSize: 10,
    pageIndex: 1,
    searchText: ''
})
// 添加用户表单
let addModel = reactive({
    NickName: '',
    UserName: '',
    UserPwd: ''
})
// 编辑用户表单
let editModel = reactive({
    Id: 0,
    NickName: '',
    UserName: ''
})
// 修改密码表单
let pwdModel = reactive({
    Id: 0,
    UserPwd:''
})
// 编辑用户规则
let editrules = reactive({
    UserName: [
        { required: true, message: '用户名不能为空' },
        { min: 5, message: '用户名长度不能小于5' }
    ]
})
// 修改密码规则
let pwdrules = reactive({
    UserPwd: [
        { required: true, message: '密码不能为空' },
        { min: 6, message: '密码长度不能小于6' }
    ]
})
// 添加用户规则
let rules = reactive({
    UserName: [
        { required: true, message: '用户名不能为空' },
        { min: 5, message: '用户名长度不能小于5' }
    ],
    UserPwd: [
        { required: true, message: '密码不能为空' },
        { min: 6, message: '密码长度不能小于6' }
    ]
})
let loading = ref(true)
let total = ref(0)
// 加载数据
function loadData() {
    loading.value = true
    connect.get('Users', { params: pageModel })
        .then(resp => {
            data.splice(0)//清空数据
            data.push(...resp.Data.List)//后加载数据
            loading.value = false
            total.value = resp.Data.Total
        })
}
// 搜索按钮
function search() {
    pageModel.pageIndex = 1
    loadData()
}
// 打开添加弹窗
function dialogadd() {
    dialogVisible.value = true
    addModel.NickName = ''
    addModel.UserName = ''
    addModel.UserPwd = ''
}
// 打开编辑弹窗
function dialogedit(row) {
    dialogVisibledit.value = true
    editModel.Id = row.Id
    editModel.NickName = row.NickName
    editModel.UserName = row.UserName
}
// 打开修改密码弹窗
function diapwd(row) {
    dialogVisiblepwd.value = true
    pwdModel.Id = row.Id
    pwdModel.UserPwd=''
}
// 添加新用户
function addUser() {
    addForm.value.validate(isValid => {
        if (isValid) {
            const loading = ElLoading.service({
                lock: true,
                text: '加载中……',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            connect.post('User', addModel)
                .then(resp => {
                    loading.close()
                    if (resp.Code == '000') {
                        ElNotification({
                            title: '成功',
                            message: resp.Message,
                            type: 'success',
                        })
                        pageModel.pageIndex = 1
                        loadData()
                        dialogVisible.value = false
                    } else {
                        ElNotification({
                            title: '错误',
                            message: resp.Message,
                            type: 'error',
                        })
                    }
                })
                .catch(error => {
                    loading.close()
                })
        }
    })
}
// 编辑用户
function editUser() {
    editForm.value.validate(isValid => {
        if (isValid) {
            const loading = ElLoading.service({
                lock: true,
                text: '加载中……',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            connect.put('User', editModel)
                .then(resp => {
                    loading.close()
                    if (resp.Code == '000') {
                        ElNotification({
                            title: '成功',
                            message: resp.Message,
                            type: 'success',
                        })
                        pageModel.pageIndex = 1
                        loadData()
                        dialogVisibledit.value = false
                    } else {
                        ElNotification({
                            title: '错误',
                            message: resp.Message,
                            type: 'error',
                        })
                    }
                })
                .catch(error => {
                    loading.close()
                })
        }
    })
}
// 删除用户
function delrow(id) {
    const loading = ElLoading.service({
        lock: true,
        text: '加载中……',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    connect.delete('User/' +id)
        .then(resp => {
            loading.close()
            if (resp.Code == '000') {
                ElNotification({
                    title: '成功',
                    message: resp.Message,
                    type: 'success',
                })
                pageModel.pageIndex = 1
                loadData()
            } else {
                ElNotification({
                    title: '错误',
                    message: resp.Message,
                    type: 'error',
                })
            }
        })
        .catch(error => {
            loading.close()
        })
}
// 修改密码
function pwdredit() {
    pwdForm.value.validate(isValid => {
        if (isValid) {
            const loading = ElLoading.service({
                lock: true,
                text: '加载中……',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            connect.put('ChangePwd', pwdModel)
                .then(resp => {
                    loading.close()
                    if (resp.Code == '000') {
                        ElNotification({
                            title: '成功',
                            message: resp.Message,
                            type: 'success',
                        })
                        pageModel.pageIndex = 1
                        loadData()
                        dialogVisiblepwd.value = false
                    } else {
                        ElNotification({
                            title: '错误',
                            message: resp.Message,
                            type: 'error',
                        })
                    }
                })
                .catch(error => {
                    loading.close()
                })
        }
    })
}
// 页码改变
function handleCurrentChange() {
    loadData()
}
// 每一页记录数改变
function handleSizeChange() {
    // 重新刷新数据
    pageModel.pageIndex = 1
    loadData()
}
loadData()
</script>
<style scoped>
.toolbar {
    display: flex;
    margin-bottom: 10px;
    justify-content: end;
}

.search {
    margin-left: 10px;
}

.bottom {
    padding-top: 20px;
}

.bottom .el-pagination {
    justify-content: end;
}
</style>